<!-- 主题设置抽屉 license by http://eleadmin.com -->
<template>
    <el-drawer
      size="780px"
      :visible="visible"
      :append-to-body="true"
      :title="'已核销发票明细'"
      @update:visible="updateVisible" @open="init">
      <el-form label-width="77px" :model="form" class="ele-form-search">
        <el-row :gutter="15">
            <el-col :lg="12" :md="24">
                <el-form-item label="申请单号">
                    <el-input v-model="form.vbillcode" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :lg="12" :md="24">
                <el-form-item label="客户编码">
                    <el-input v-model="form.custcode" disabled></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :lg="24" :md="24">
            <el-form-item label="客户名称">
              <el-input v-model="form.custname" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
            <el-col :lg="12" :md="24">
                <el-form-item label="药品名称">
                    <el-input v-model="form.invname" disabled></el-input>
                </el-form-item>
            </el-col>
          <el-col :lg="12" :md="24">
            <el-form-item label="批号">
              <el-input v-model="form.vlotno" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
            <el-col :lg="12" :md="24">
                <el-form-item label="入库数量">
                    <el-input v-model="form.nnum" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :lg="12" :md="24">
                <el-form-item label="已售数量">
                    <el-input v-model="form.soldnum" disabled></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :lg="12" :md="24">
            <el-form-item label="剩余数量">
              <el-input v-model="form.remainnum" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="15">
            <el-col :lg="24" :md="24">
                <el-form-item label="">
                    <el-button
                  type="primary"
                  icon="el-icon-save"
                  class="ele-btn-icon"
                  @click="reload">确定
                </el-button>
                </el-form-item>
            </el-col>
        </el-row> -->
      </el-form>
      <ele-pro-table
          ref="tableMaterial"
          :where="where"
          :datasource="materialItem"
          :columns="columnsSO"
          :need-page="false"
          :toolbar="true"
          :selection.sync="choose"
          highlight-current-row
          @row-click="materialRowClick"
          height="calc(100vh - 243px)">
          <!-- 表头工具栏 -->
          <template slot="toolbar">
            <el-button v-if="false"
              size="small"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              @click="openEdit(null)"
              >添加
            </el-button>
            <el-button
              size="small"
              type="danger"
              icon="el-icon-delete"
              class="ele-btn-icon"
              @click="removeBatch"
             >删除
            </el-button>
          </template>
          <!-- 操作列 -->
          <template slot="realnum" slot-scope="{row}">
            <el-input size="small" v-model="row.realnum" clearable></el-input>
          </template>
        </ele-pro-table>
    </el-drawer>
  </template>

  <script>
  import Locale from 'element-ui/lib/mixins/locale';
  // 默认主题色
  const DEFAULT_THEMES = [
    {
      name: 'default',
      value: null,
      color: '#1890ff'
    },
    {
      name: 'dust',
      value: '#5f80c7'
    },
    {
      name: 'sunset',
      value: '#faad14'
    },
    {
      name: 'volcano',
      value: '#f5686f'
    },
    {
      name: 'purple',
      value: '#9266f9'
    },
    {
      name: 'cyan',
      value: '#2bccce'
    },
    {
      name: 'green',
      value: '#33cc99'
    },
    {
      name: 'geekblue',
      value: '#32a2d4'
    }
  ];

  export default {
    name: 'SecondSaleForm',
    mixins: [Locale],
    emits: [
      'change-style',
      'change-color',
      'change-dark-mode',
      'change-weak-mode',
      'update:visible'
    ],
    props: {
      // 是否显示, 支持.sync修饰
      visible: Boolean,
      // 颜色选择器预设颜色
      data: Array,
      material:Array
    },
    data() {
      let chooseColor = this.color;
      if (this.color && typeof this.themes !== 'undefined' && this.themes !== null) {
        (this.themes.length ? this.themes : DEFAULT_THEMES).forEach((t) => {
          if (this.color === t.value) {
            chooseColor = null;
          }
        });
      }
      return {
        form:{},
        materialItem:[],
        choose:[],
        columnsSO:[
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center',
            fixed: "left"
          },
          {
            prop: 'dbilldate',
            label: '发票日期',
            showOverflowTooltip: true,
            minWidth: 80,
            align: 'center'
          },
          {
            prop: 'vgoldtaxcode',
            label: '发票号',
            showOverflowTooltip: true,
            minWidth: 70,
            align: 'center'
          },
        //   {
        //     prop: 'custcode',
        //     label: '客户编码',
        //     showOverflowTooltip: true,
        //     minWidth: 100,
        //     align: 'center'
        //   },
          {
            prop: 'custname',
            label: '客户名称',
            showOverflowTooltip: true,
            minWidth: 160,
            align: 'left'
          },
          {
            prop: 'invoicenum',
            label: '发票数量',
            showOverflowTooltip: true,
            minWidth: 70,
            align: 'center'
          },
          {
            prop: 'checknum',
            label: '已核数量',
            showOverflowTooltip: true,
            minWidth: 70,
            align: 'center'
          },
          {
            prop: 'opername',
            label: '操作人',
            showOverflowTooltip: true,
            minWidth: 70,
            align: 'center'
          },
          {
            prop: 'opertime',
            label: '操作时间',
            showOverflowTooltip: true,
            minWidth: 120,
          },
        //   {
        //     prop: 'realnum',
        //     label: '本次数量',
        //     showOverflowTooltip: true,
        //     minWidth: 100,
        //     align: 'center',
        //     slot:'realnum'
        //   },
        //   {
        //     prop: 'nqtorigprice',
        //     label: '发票无税单价',
        //     showOverflowTooltip: true,
        //     minWidth: 100,
        //     align: 'center'
        //   },
        //   // {
        //   //   prop: 'norigtaxmny',
        //   //   label: '发票价税合计',
        //   //   showOverflowTooltip: true,
        //   //   minWidth: 140,
        //   //   align: 'center'
        //   // },
        //   {
        //     prop: 'norigmny',
        //     label: '无税合计',
        //     showOverflowTooltip: true,
        //     minWidth: 140,
        //     align: 'center'
        //   },
        //   {
        //     prop: 'psnname',
        //     label: '业务员',
        //     showOverflowTooltip: true,
        //     minWidth: 80,
        //     align: 'center'
        //   },
        //   {
        //     prop: 'deptname',
        //     label: '部门',
        //     showOverflowTooltip: true,
        //     minWidth: 120,
        //     align: 'center'
        //   },
        ],
        // 默认的主题色
        defaultThemes: DEFAULT_THEMES,
        // 颜色选择器选中颜色
        chooseColor: chooseColor
      };
    },
    mounted() {
        console.log(this.data);
    console.log(this.material);
    if(this.data)
      {
        this.form = Object.assign({},this.data[0]);
      }
    },
    methods: {
      /* 修改visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
      async init(){
        this.form = {};
        this.materialItem = {};
        if(this.data && this.data.length>0)
        {
            this.form = Object.assign({},this.data[0]);
            var res2 = await this.$http.get('/return/resalelist/'+this.form.cgeneralbid);
            if(res2.status==200)
            {
            this.materialItem = res2.data.data;
            }

        }
        if(this.material && this.material.length>0)
        {
            //this.materialItem = Object.assign([],this.material);
        }

      },
      materialRowClick(row)
      {
        //this.selectionMaterial = [];
        //this.$refs.tableMaterial.clearSelection();
        //this.selectionMaterial.push(row);
        this.$refs.tableMaterial.toggleRowSelection(row,true);

      },
      reload(){
        this.updateVisible(false);
        if(this.material && this.material.length>0)
        {
            this.$emit('donematerial',this.form.realreason,this.form.remark);
        }
        else
        {
            this.$emit('done',this.form.realreason,this.form.remark);

        }
      },
      async removeBatch(){
        if (this.choose.length === 0) return this.$message.info('请选择一个核销记录后删除');
        this.$confirm('确定要删除选中的核销数量吗?', '提示', {type: 'warning'}).then(() => {
          const loading = this.$loading({lock: true});
          var ids = this.choose[0].cgeneralbid;
          var invoicebid = this.choose[0].csaleinvoicebid;

          this.$http.post('/return/delinstcok/'+invoicebid+'/'+ids).then(res => {
            loading.close();
            if (res.data.code === 0) {
              this.$message({type: 'success', message: res.data.msg});
              this.form.soldnum = Number(this.form.soldnum) - Number(this.choose[0].checknum);
              this.$emit('done',this.form.soldnum);
              this.$http.get('/return/resalelist/'+ids).then(res => {
                if(res.status==200)
                {
                this.materialItem = res.data.data;
                }
               }).catch(e => {
               this.$message.error(e.message);
          });
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            loading.close();
            this.$message.error(e.message);
          });
        }).catch(() => 0);
      },
      /* 切换主题色 */
      changeColor(value) {
        if (value !== this.color) {
          this.$emit('change-color', value);
        }
      },
      /* 修改主题风格 */
      changeStyle(key, value) {
        this.$emit('change-style', {key: key, value: value});
      },
      setHeadStyle(value) {
        this.changeStyle('headStyle', value);
      },
      setSideStyle(value) {
        this.changeStyle('sideStyle', value);
      },
      setLayoutStyle(value) {
        this.changeStyle('layoutStyle', value);
      },
      setSideMenuStyle(value) {
        this.changeStyle('sideMenuStyle', value ? 'mix' : 'default');
      },
      setBodyFull(value) {
        this.changeStyle('bodyFull', value);
      },
      setFixedHeader(value) {
        this.changeStyle('fixedHeader', value);
      },
      setFixedSidebar(value) {
        this.changeStyle('fixedSidebar', value);
      },
      setFixedBody(value) {
        this.changeStyle('fixedBody', value);
        if (value) {
          document.body.style.width = null;
        }
      },
      setLogoAutoSize(value) {
        this.changeStyle('logoAutoSize', value);
      },
      setColorfulIcon(value) {
        this.changeStyle('colorfulIcon', value);
      },
      setSideUniqueOpen(value) {
        this.changeStyle('sideUniqueOpen', value);
      },
      setWeakMode(value) {
        this.$emit('change-weak-mode', value);
      },
      setDarkMode(value) {
        this.$emit('change-dark-mode', value);
      },
      setShowFooter(value) {
        this.changeStyle('showFooter', value);
        if (!value) {
          document.body.style.width = null;
        }
      },
      setShowTabs(value) {
        this.changeStyle('showTabs', value);
      },
      setTabStyle(value) {
        this.changeStyle('tabStyle', value);
      }
    }
  }
  </script>

  <style scoped>
  .ele-setting-wrapper {
    padding: 20px 18px;
  }

  .ele-setting-wrapper .ele-setting-title {
    font-size: 13px;
    margin-bottom: 15px;
  }

  /* 主题风格 */
  .ele-setting-wrapper .ele-setting-theme > div {
    width: 52px;
    height: 36px;
    line-height: 1;
    font-size: 18px;
    border-radius: 3px;
    margin: 0 20px 30px 0;
    padding: 14px 0 0 24px;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
    display: inline-block;
    vertical-align: top;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background-color .2s;
  }

  .ele-setting-wrapper .ele-setting-theme > div:before,
  .ele-setting-wrapper .ele-setting-theme > div:after,
  .ele-setting-wrapper .ele-setting-theme > div > .ele-bg-primary {
    content: "";
    width: 100%;
    height: 10px;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    transition: background-color .2s;
  }

  .ele-setting-dark .ele-setting-theme > div {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
  }

  .ele-setting-dark .ele-setting-theme > div:before,
  .ele-setting-dark .ele-setting-theme > div:after,
  .ele-setting-dark .ele-setting-theme > div > .ele-bg-primary {
    background: #1f1f1f;
  }

  .ele-setting-wrapper .ele-setting-theme > div:after {
    width: 14px;
    height: 100%;
  }

  .ele-setting-wrapper .ele-setting-theme > div.ele-side-dark:after,
  .ele-setting-wrapper .ele-setting-theme > div.ele-head-dark:before,
  .ele-setting-wrapper .ele-setting-theme > div.ele-layout-mix:before,
  .ele-setting-wrapper .ele-setting-theme > div.ele-layout-mix:after {
    background: #001529;
  }

  .ele-setting-dark .ele-setting-theme > div.ele-side-dark:after,
  .ele-setting-dark .ele-setting-theme > div.ele-head-dark:before,
  .ele-setting-dark .ele-setting-theme > div.ele-layout-mix:before,
  .ele-setting-dark .ele-setting-theme > div.ele-layout-mix:after {
    background: #262626;
  }

  .ele-setting-wrapper .ele-setting-theme > div.ele-head-light:before,
  .ele-setting-wrapper .ele-setting-theme > div.ele-head-dark:before,
  .ele-setting-wrapper .ele-setting-theme > div > .ele-bg-primary {
    z-index: 1;
  }

  /* 主题色选择 */
  .ele-setting-wrapper .ele-setting-colors {
    color: #fff;
    margin-bottom: 20px;
  }

  .ele-setting-wrapper .ele-setting-color-item {
    width: 20px;
    height: 20px;
    line-height: 22px;
    border-radius: 2px;
    margin: 8px 8px 0 0;
    display: inline-block;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
    vertical-align: top;
    position: relative;
    text-align: center;
    cursor: pointer;
  }

  /* 主题配置项 */
  .ele-setting-wrapper .ele-setting-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .ele-setting-wrapper .ele-setting-item .setting-item-title {
    flex: 1;
    line-height: 28px;
  }

  .ele-setting-wrapper .ele-setting-item .setting-item-control {
    line-height: 1;
    max-width: 95px;
  }

  .ele-setting-wrapper .el-divider {
    margin-bottom: 20px;
  }

  /* 颜色选择器 */
  .ele-setting-color-picker.el-color-picker {
    height: auto;
    margin-top: 8px;
  }

  .ele-setting-color-picker.el-color-picker .el-color-picker__trigger {
    padding: 0;
    width: 20px;
    height: 20px;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  }

  .ele-setting-color-picker.el-color-picker .el-color-picker__color {
    border: none;
  }

  .ele-setting-color-picker.el-color-picker .el-color-picker__color-inner {
    border-radius: 2px;
  }

  .ele-setting-color-picker.el-color-picker .el-color-picker__empty {
    background: linear-gradient(45deg, #00dbde 5%, #fc00ff 105%);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    border-radius: 2px;
    font-size: 0;
  }

  .ele-setting-color-picker.el-color-picker .el-color-picker__icon {
    font-size: 14px;
  }
  .el-row {
  margin-bottom: -10px;
  margin-top: 1px;
  display: flex;
  flex-wrap: wrap
}
  </style>
